import request from "../../utils/request"
// pages/video/video.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    NavList: [],
    defaultId: '',
    videoList: [],
    playId: '', //播放的id
    playTimeList: [], //播放的时间
    refresherFlag: false //下拉的状态管理
  },
  handlerRefresh() {
    this.setData({
      refresherFlag: true,
    })
    this.getVideoList()
  },
  // 上拉触底后,再次加载新的数据
  handlerToLower() {
    let videoList = this.data.videoList
    videoList.push(...videoList)
    if (videoList.length < 30) {
      this.setData({
        videoList
      })
    }
  },
  async getVideoList() {
    const rs = await request('/video/group', {
      id: this.data.defaultId
    })
    if (rs.code === 200) {
      const videoList = rs.datas.map(item => item.data)
      setTimeout(() => {
        this.setData({
          refresherFlag: false,
          videoList
        })
      }, 2000)
    }
  },
  // 添加历史 播放记录
  seekHistoryRecord(id) {
    const obj = this.data.playTimeList.find(i => i.id === id)
    console.log(obj);
    if (obj) {
      this.player.seek(obj.currentTime)
    }
  },
  //获取nav导航栏数据
  async getNavList() {
    const res = await request('/video/group/list')
    this.setData({
      NavList: res.data.slice(0, 8),
      // 初始化请求数据的时候 默认第一个高亮
      defaultId: res.data[0].id
    })
    this.getVideoList()
  },
  // 获取当前播放的时间节点
  getVideoTime(event) {
    // 1.获取当前播放的时间节点(每隔250ms时间就会发送) 和当前的视频的id  放到一个对象里 将对象添加到data中的数组中
    const currentTime = event.detail.currentTime
    const id = event.target.id
    const playTimeList = this.data.playTimeList
    // 找到符合条件的那一项(播放过每一项组成的数组的记录)
    const obj = playTimeList.find(item => item.id === id)
    // 如果有 说明播放过 找到播放记录时间
    if (obj) {
      obj.currentTime = currentTime
    } else {
      // 如果没有就说明第一播放没有历史记录 添加到数组中
      playTimeList.push({
        id,
        currentTime
      })
    }
    this.setData({
      playTimeList
    })
  },
  VideoClick(event) {
    // 获取当前点击 视频组件的 id
    const id = event.target.id
    // this.player 保证全局只有一个 播放的实例
    // 要先判断 当前的视频是否存在
    if (this.player) {
      // 如果当前点击的id 和 上一个id 不一样 才进去
      if (this.data.playId !== id) {
        // 如果有 就暂停上一个视频
        this.player.pause();
        // 创建新的 视频实例this.player赋值  在进行播放
        // 覆盖上一次的 视频实例
        this.player = wx.createVideoContext(id);
        // 跳转到 历史记录页面
        this.seekHistoryRecord(id);
        this.player.play();
        // 保存当前播放的id
        this.setData({
          playId: id
        })
      } else {
        // 当前的id 和 上一次的id 一样
      }
    } else {
      // 首次进入
      // 创建新的 视频实例 给this.player赋值
      this.player = wx.createVideoContext(id);
      this.player.play();
      // 保存当前播放的id
      this.setData({
        playId: id
      })
    }
    // 创建一个 video 视频实例的对象 
    const player = wx.createVideoContext(id)
    player.play();
    this.player = player
  },
  // 点击导航栏每个nav的事件 
  clickNav(e) {
    // 设置当前的默认的id为点击的那个id
    this.setData({
      defaultId: e.target.dataset.id
    })
    this.getVideoList()
  },
  // 获取视频标签列表 需要携带cookie
  async getVideoList() {
    const res = await request("/video/group", {
      id: this.data.defaultId
    })
    // 拿到数据后修改数据
    if (res.code === 200) {
      const videoList = res.datas.map(item => item.data)
      this.setData({
        videoList
      })
    }
  },
  // 播放完成后删除记录
  handlerEnd(event) {
    let vid = event.currentTarget.id
    let playRecordList = this.data.playRecordList
    let newPlayRecordList = playRecordList.filter(item => item.vid !== vid)
    this.setData({
      playTimeList: newPlayRecordList
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getNavList()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },
  onShareAppMessage({from}) {
      console.log('用户点击右上角分享',from)
      return {
        imageUrl:'../../static/images/song/disc.png',
        path:'/pages/index/index',
        title :'快分享给好友吧'
      }
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
})